﻿<h3 class="important-tittle">Customizing Tooltips</h3>

<p>
    By default every chart that requires a Tooltip or Legend, initializes a new instance of
    <a href="/App/documentation/beta/LiveCharts-Wpf-DefaultLegend">DefaultLegend</a>  or
    <a href="/App/documentation/beta/LiveCharts-Wpf-DefaultTooltip">DefaultTooltip</a>.
</p>

<h4>Customizing defaults</h4>

<p>
    you can customize a little about these classes, for example the background color, bullet size, or orientation, as shown in the next code snippet,
</p>

<pre class="prettyprint">cartesianChart1.Datatooltip.Bulletize = 20;
cartesianChart1.DataTooltip.Background = Brushes.Red;</pre>

<p>
    You can also set the selection mode of your tooltip, for example with the next code we force our tooltip
    to display only the point that was hovered.
</p>

<pre class="prettyprint">cartesianChart1.DataTooltip.SelectionMode = LiveCharts.TooltipSelectionMode.OnlySender;</pre>

<h4>From Scratch</h4>

<p>
    The previous block works when you need to customize the appearance of your chart components, but how about
    modifying the way the data is displayed in the tooltip, or showing extra properties in your tooltips?
</p>

<p>
    Sadly there is not a native way to do this in WinForms, since LiveCharts.Winforms actually is a wrapper
    for LieCharts.Wpf you must define Wpf UserControls to make this work, it is really easy and you don't
    really need to know too much about WPF to make this work.
</p>

<p>
    The <i class="text-muted">DefaultTooltip</i> and <i class="text-muted">DefaultLegend</i> classes try to work for all cases, if you need a specialized
    component you can easily define your own, the logic is the next, you create a custom UserControl,
    LiveCharts will inject the data the user needs to see in the tooltip, and you need to handle how to
    display this data according to your needs, you can do everything you know about WPF to make it work.
</p>

<p>
    In the next example we will configure our chart to plot <i class="text-muted">CustomerVm</i> class,
    and we will build a custom tooltip to show more properties about our customers.
</p>

<div class="text-center">
    <img src="/App/Examples/v1/Tooltips And Legends/Images/Customizing Tooltips.jpg" />
</div>

<p>
    Right click in your solution explorer, Add -> New Item -> Browse for Class, name the file CustomerVm.cs
    and replace the generated file content with:
</p>

<pre class="prettyprint" url="https://raw.githubusercontent.com/beto-rodriguez/Live-Charts/master/Examples/Wpf/CartesianChart/CustomTooltipAndLegend/CustomerVM.cs"></pre>

<p>
    OK, now we are going to build our own DataTooltip, this tooltip will display all the
    <i class="text-muted">CustomerVm</i> properties, Right click in your solution explorer
    Add -> New Item -> Browse for <i class="text-muted">User Control (WPF)</i>, name the UserControl
    CustomersTooltip.
</p>

<p>
    Replace CustomersTooltip.xaml with:
</p>

<pre class="prettyprint" url="https://raw.githubusercontent.com/beto-rodriguez/Live-Charts/master/Examples/Wpf/CartesianChart/CustomTooltipAndLegend/CustomersTooltip.xaml"></pre>

<p>
    And the code behind of the user control (CustomersTooltip.xaml.cs)
</p>

<pre class="prettyprint" url="https://raw.githubusercontent.com/beto-rodriguez/Live-Charts/master/Examples/Wpf/CartesianChart/CustomTooltipAndLegend/CustomersTooltip.xaml.cs"></pre>

<p>
    The important parts there is that CustomersTooltip implements <i class="text-muted">IChartTooltip</i>
    this interface requires our user control to Implement <i class="text-muted">INotifyPropertyChanged</i>
    and a new property <i class="text-muted">Data</i> of type <a href="/App/documentation/beta/LiveCharts-Wpf-TooltipData">TooltipData</a>,
    LiveCharts will inject all it knows about the current points to show in the tooltip, your job is to
    display this data as you require.
</p>

<p>
    Notice we used the <i class="text-muted">DataContext</i> property of the user control, and binded
    the <i class="text-muted">Data.Points</i> property to our <i class="text-muted">ItemsControl</i>
    to display the current points as we need.
</p>

<p>
    Lets also create a simple custom Legend, with a custom style, add another User control and name it
    <i>CustomersLegend</i>, the logic is the same as the custom tooltip, you implement <i class="text-muted">IChartLegend</i>
    then you handle the injected data by LiveCharts
</p>

<pre class="prettyprint" url="https://raw.githubusercontent.com/beto-rodriguez/Live-Charts/master/Examples/Wpf/CartesianChart/CustomTooltipAndLegend/CustomersLegend.xaml"></pre>

<pre class="prettyprint" url="https://raw.githubusercontent.com/beto-rodriguez/Live-Charts/master/Examples/Wpf/CartesianChart/CustomTooltipAndLegend/CustomersLegend.xaml.cs"></pre>

<p>
    Finally lets set this customs controls to our chart.
</p>

<pre class="prettyprint">cartesianChart1.ChartLegend = new CustomersLegend();
cartesianChart1.DataTooltip = new CustomersTooltip();</pre>
